<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>菜单练习</title>
    <style>
        body{
            margin: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .container{
            /*border: 1px solid #000;*/
            box-shadow: 0px 0px 2px green;
            width:900px;
            margin:0px auto;
        }
        .list{
            display: flex;
        }
        .list li{
            text-align:center;
            line-height:40px;
            padding:0px 20px;
            border: 1px solid #000;
            margin-right:10px;
            position:relative;
        }
        .bt{
            width:100px;
            margin:0 auto;
            border:2px solid orange;
            line-height:50px;
            text-align: center;
            margin-top:35px;
            border-radius:5px;
            display: none;
        }
        .list li:first-child{
            border:none;
        }
        .list .inner{
            position: absolute;
            top:40px;
            left:-1px;
            width:240px;
            font-size:14px;
            text-align: left;
            border: 1px solid #ccc;
            background-color:cornsilk;
            display: none;
        }
        span{
            display: inline-block;
            width:100%;
            height:100%;
        }
    </style>
</head>

<body>
<div class="container">
    <ul class="list">
        <li>
            <span>白条分期</span>
        </li>
        <li>
            <span>不分期</span>
            <div class="inner">无手续费 </div>
        </li>
        <li>
            <span> ￥1183.83*3期</span> 
            <div class="inner">含手续费：费率0.5%，￥17.5×3期</div>  
        </li>
        <li>
            <span>￥600.66*6期</span>
            <div class="inner">含手续费：费率0.5%，￥17.5×6期</div>
        </li>
        <li>
            <span>￥309.08*12期</span>
            <div class="inner">含手续费：费率0.5%，￥17.5×12期</div>
        </li>
        <li>
            <span>￥163.29*24期</span>
            <div class="inner">含手续费：费率0.5%，￥17.5×24期 </div>
        </li>
    </ul>
</div>
<div class="bt">白条</div>
<script src="./jquery.js">
    
</script>
</body>

</html>
<script>
    $('.list li').mouseover(function(){
        $(this).css('border-color','red');
        // .siblings().css('border-color','black');
        $(this).find('div').css('display','block');
        // .end().siblings('li').find('div').css('display','none');
    })
    $('.list li').mouseout(function(){
        $(this).css('border-color','black');
        $(this).find('div').css('display','none');
    })
    var count = 0;
    var one = 0;
    var two = 0;
    $('.list li').click(function(ev){
        count ++;
        $('.bt').css('display','block');
        if( count %2 == 1){
            one = $(this).index();
        }else{
            two = $(this).index();   
        }
        if( one == two){
            $('.bt').css('display','none');
            one  = 0;
            two = 0;
            }
    })
</script>